<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    function clickEvent(){
        const start = document.getElementById('start').value;
        const stop = document.getElementById('stop').value;

        while (document.getElementById("block").firstChild) {
            document.getElementById("block").removeChild(document.getElementById("block").firstChild);
        }
        if (start !== "" && stop !== "") {
            var params = "start=" + start + "&stop=" + stop;
            const Http = new XMLHttpRequest();
            const url='http://' + window.location.hostname + '/api/home-timeline/read';
            Http.open("GET", url + "?" + params, true);
            Http.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var resp_json = JSON.parse(Http.responseText);
                    for(var i = 0; i < resp_json.length; i++) {
                        var post_json = resp_json[i];
                        var textnode = document.createTextNode((i + 1).toString() + ": " + post_json["text"])
                        document.getElementById("block").appendChild(textnode);
                        for (var j = 0; j < post_json["media"].length; j++) {
                            var media_json = post_json["media"][j];
                            var img = document.createElement("img");
                            img.src = "http://" + window.location.hostname + "/get-media/?filename=" +
                                    media_json["media_id"] + "." +
                                    media_json["media_type"];
                            document.getElementById("block").appendChild(img);
                        }

                    }
               }
            };

            Http.send(null);

        }


    }

</script>




    start: <input type="text" id="start" name="start"><br>
    stop: <input type="text" id="stop" name="stop"><br>
    <input type="button" value="go" onClick="clickEvent();">

<div id="block">

</div>




</body>
</html>
